<template>
  <div>
    <el-select
      v-model="province"
      :style="{ width: width + 'px' }"
      :size="size"
      class="mr10"
      :disabled="disabled"
      clearable
      @change="handleProvinceChange"
      @clear="handleClear"
    >
      <el-option
        v-for="item in provinceList"
        :key="item.id"
        :label="item.name"
        :value="item.code"
      />
    </el-select>

    <el-select
      v-model="city"
      :style="{ width: width + 'px' }"
      :size="size"
      class="mr10"
      :disabled="disabled"
      clearable
      @change="handleCityChange"
      @clear="handleClear2"
    >
      <el-option
        v-for="item in cityList"
        :key="item.id"
        :label="item.name"
        :value="item.code"
      />
    </el-select>

    <el-select
      v-model="county"
      :style="{ width: width + 'px' }"
      :size="size"
      :disabled="disabled"
      clearable
      @clear="handleClear3"
      @change="handleCountyChange"
    >
      <el-option
        v-for="item in countyList"
        :key="item.id"
        :label="item.name"
        :value="item.code"
      />
    </el-select>
  </div>
</template>

<script>
import { address } from '@/api/base'
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    width: {
      type: Number,
      default: 200
    },
    size: {
      type: String,
      default: 'medium'
    },
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      province: '',
      city: '',
      county: '',
      provinceList: [],
      cityList: [],
      countyList: []
    }
  },
  watch: {
    value(val) {
      if (!val) {
        this.province = ''
        this.city = ''
        this.county = ''
      } else {
        this.init()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.splitAddress(this.value)
      const provinceList = await address(0)
      this.provinceList = provinceList.data
      if (this.province) {
        const cityList = await address(this.province)
        this.cityList = cityList.data
      }
      if (this.city) {
        const countyList = await address(this.city)
        this.countyList = countyList.data
      }
    },
    handleClear() {
      this.province = ''
      this.city = ''
      this.county = ''
      this.$forceUpdate()
      this.combineAddress()
    },
    handleClear2() {
      this.city = ''
      this.county = ''
      this.$forceUpdate()
      this.combineAddress()
    },
    handleClear3() {
      this.$forceUpdate()
      this.combineAddress()
    },
    splitAddress(str) {
      if (!str) return
      const addressArr = str.split(',')
      if (addressArr.length === 3 || addressArr.length === 2) {
        this.province = addressArr[0] || ''
        this.city = addressArr[1] || ''
        this.county = addressArr[2] || ''
      } else {
        const address = addressArr[0]
        if (address.slice(2, 6) === '0000') {
          // 省级的code
          this.province = address
          return
        } else if (address.slice(4, 6) === '00') {
          // 市级code
          this.province = address.slice(0, 2) + '0000'
          this.city = address
          return
        } else {
          this.province = address.slice(0, 2) + '0000'
          this.city = address.slice(0, 4) + '00'
          this.county = address
        }
      }
    },
    combineAddress() {
      const addressArr = []
      if (this.province) {
        addressArr.push(this.province)
      }
      if (this.city) {
        addressArr.push(this.city)
      }
      if (this.county) {
        addressArr.push(this.county)
      }
      this.$emit('change', addressArr.join(','))
    },
    async handleProvinceChange(val) {
      if (val) {
        const cityList = await address(val)
        this.cityList = cityList.data
        this.city = ''
        this.county = ''
        this.countyList = []
        this.$forceUpdate()
        this.combineAddress()
      }
    },

    async handleCityChange(val) {
      if (val) {
        const countyList = await address(val)
        this.countyList = countyList.data
        this.county = ''
        this.$forceUpdate()
        this.combineAddress()
      }
    },
    async handleCountyChange(val) {
      if (val) {
        this.$forceUpdate()
        this.combineAddress()
      }
    }
  }
}
</script>
